<template>
	<view class="page">
		<view class="test-check">
			<!-- <view v-if="[2, 3, 6].includes(info.step)" class="top-content"
				:style="info.step === 6 ? 'margin-top: 100rpx;' : ''"> -->
			<view v-if="[2, 3, 6].includes(info.step)" class="top-content">
				<template v-if="info.step && info.step === 2">
					<image v-if="info.image && info.step" class="step-image" :class="`step-${info.imageNum}`"
						:src="`https://www.shlxkj.info:10010/%E5%81%A5%E5%BA%B7%E6%A1%A3%E6%A1%88/img/${info.image}`"
						mode="aspectFit" />
					<view v-if="info.imageDesc" class="image-desc">{{ info.imageDesc }}</view>
				</template>
				<template v-if="info.step && info.step === 3">
					<image v-if="info && info.step" class="step-image" :class="`step-${info.imageNum}`"
						:src="`https://www.shlxkj.info:10010/%E5%81%A5%E5%BA%B7%E6%A1%A3%E6%A1%88/img/${info.image}`"
						mode="aspectFit" />
					<view v-if="info.imageDesc" class="image-desc">{{ info.imageDesc }}</view>
				</template>
				<template v-else-if="info.step && info.step === 6" >
					<view style="padding-top:30rpx">
					<countDown ref="down" :times='times' @endTime='endTime' @pause='pauseNum'></countDown>
					<image class="countdown"
						src="https://www.shlxkj.info:10010/%E5%81%A5%E5%BA%B7%E6%A1%A3%E6%A1%88/img/step-countdown.png" />
					<view v-if="time === -1" class="reading-data small">正在检测加样，请确认完成加样操作......</view>
					<view v-else class="reading-data">数据读取中</view>
					<view class="device-number">电子检测盒编号：{{ deviceNumber }}</view>
				<!-- 	<view class="fixed-box" v-show="fixedShow" @click="goAss">
						<p>问卷</p>
					</view> -->
					</view>

				</template>
			</view>
			<view v-else-if="info.step === 1" class="content multi">
				<image class="content-bg"
					src="https://www.shlxkj.info:10010/%E5%81%A5%E5%BA%B7%E6%A1%A3%E6%A1%88/img/content-bg.png" />
				<view class="container">
					<image class="down-arrow"
						src="https://www.shlxkj.info:10010/%E5%81%A5%E5%BA%B7%E6%A1%A3%E6%A1%88/img/down.png" />
					<view v-for="item in info.steps" :key="item.name" class="step-item">
						<view v-if="item.imageDesc" class="image-desc">{{ item.imageDesc }}</view>
						<template v-if="item.content && item.content.length">
							<view class="step-name">{{ item.name }}</view>
							<view class="step-desc">
								<view v-for="(v, index) in item.content" :key="index" class="desc">{{ v }}</view>
							</view>
						</template>
						<image referrerPolicy="no-referrer" v-if="item.image && item.step" class="step-image"
							:class="`step-${item.imageNum}`"
							:src="`https://www.shlxkj.info:10010/%E5%81%A5%E5%BA%B7%E6%A1%A3%E6%A1%88/img/${item.image}`"
							mode="aspectFit" />
					</view>
					<div v-if="info.step === 1" class="scan-btn-wrap">
						<p v-if="info.step === 1" style="text-align: center;font-size: 25rpx;padding-bottom: 20rpx;color: #58ACFA;"
							@click="help">
							无法扫码？点击解决</p>
						<button class="scan-btn" @click="onNext">{{ info.operateName }}</button>
					</div>
				</view>
			</view>
			<view v-else-if="info.step !== 3" class="content" :class="[2, 6, 7].includes(info.step) ? 'short' : ''">
				<image class="content-bg"
					src="https://www.shlxkj.info:10010/%E5%81%A5%E5%BA%B7%E6%A1%A3%E6%A1%88/img/content-bg.png" />
				<view class="container">
					<view v-if="![2, 3, 6, 7].includes(info.step)" class="image-wrap">
						<image v-if="[5].includes(info.step)" class="arrow-left"
							src="https://www.shlxkj.info:10010/%E5%81%A5%E5%BA%B7%E6%A1%A3%E6%A1%88/img/arrow-left.png"
							@click="onBack" />
						<image v-if="[4].includes(info.step)" class="arrow-right"
							src="https://www.shlxkj.info:10010/%E5%81%A5%E5%BA%B7%E6%A1%A3%E6%A1%88/img/arrow-right.png"
							@click="onNext" />
						<image v-if="info.image && info.step" class="step-image" :class="`step-${info.imageNum}`"
							:src="`https://www.shlxkj.info:10010/%E5%81%A5%E5%BA%B7%E6%A1%A3%E6%A1%88/img/${info.image}`"
							mode="aspectFit" />
						<view v-if="info.imageDesc" class="image-desc">{{ info.imageDesc }}</view>
					</view>
					<view v-else-if="info.step && info.step === 7" class="result-wrap">
						<template v-if="info.result === 0">
							<image class="result-image"
								src="https://www.shlxkj.info:10010/%E5%81%A5%E5%BA%B7%E6%A1%A3%E6%A1%88/img/step-result-normal.png" />
							<view class="result-text">阴性</view>

							<view class="tips">结果只针对此次检测样本</view>
						</template>
						<template v-else-if="info.result === 1">
							<image class="result-image"
								src="https://www.shlxkj.info:10010/%E5%81%A5%E5%BA%B7%E6%A1%A3%E6%A1%88/img/step-result-responsive.png" />
							<view class="result-text">有反应(待复查)</view>
							<view class="tips">结果只针对此次检测样本</view>
						</template>
						<template v-else-if="info.result === 2">
							<image class="result-image"
								src="https://www.shlxkj.info:10010/%E5%81%A5%E5%BA%B7%E6%A1%A3%E6%A1%88/img/step-result-invalid.png" />
							<view class="result-text">检测无效</view>
							<view class="tips">结果只针对此次检测样本</view>
						</template>
						<template v-else-if="info.result === 4">
							<image class="result-image"
								src="https://www.shlxkj.info:10010/%E5%81%A5%E5%BA%B7%E6%A1%A3%E6%A1%88/img/step-result-invalid.png" />
							<view class="result-text">检测无效</view>
						</template>
						<view class="device-number">设备编号：{{ deviceNumber }}</view>

					</view>
					<template v-if="info.content && info.content.length">
						<view v-if="info && info.step" class="step-name" :style="info.step === 7 ? 'margin-top: 100rpx;' : ''">
							{{ info.contentTitle || info.name }}
						</view>
						<view class="step-desc">
							<view v-for="(item, index) in info.content" :key="index" class="desc">{{ item }}</view>
						</view>
					</template>
				</view>
			</view>
			<button v-if="info.step !== 1 && info.step !== 7 && info.operateName" class="next-btn"
				:class="info.step === 3 ? 'white' : ''" @click="onNext">{{ info.operateName }}</button>
				
			<view class="btn_box" v-if="info.step == 7 && info.operateName">
				<button class="next-btn2" :class="info.step === 3 ? 'white' : ''"
					@click="onNext">{{ info.operateName }}</button>
			</view>
			<!-- <button v-if='info.step==7&&info.result === 0' class="close_btn" @click="close">关机</button> -->

			<uni-popup ref="agreement" type="center" style="border-radius: 26rpx;">
				<view class="agreement-height">
					<p>Q：扫码无反应，提示“正在搜索蓝牙”</p> <br />
					<p>A：请确保电池阻断片已拔出，如若电源灯不亮，请更换安心检测盒；如若电源灯闪烁，可以尝试重启手机或者开关飞行模式后重新扫描二维码。</p> <br />
					<p>&nbsp;</p><br />
					<p>Q：IOS手机无法打开蓝牙</p> <br />
					<p>A：请确保您的微信版本是最新的，因为旧版本的微信可能不支持蓝牙权限。如果已经是最新版本，您可以尝试以下步骤：</p> <br />
					<p>1. 打开手机的“设置”应用。</p><br />
					<p>2. 滚动到“微信”应用程序并点击进入。</p><br />
					<p>3. 在这里，您应该能够看到一个“蓝牙”选项。如果没有，请继续下一步。</p><br />
					<p>4. 返回到“设置”主页面，点击“隐私”选项。</p><br />
					<p>5. 在“隐私”页面中，找到“蓝牙”选项并点击进入。</p><br />
					<p>6. 在这里，您应该能够看到一个列表，列出了所有请求蓝牙权限的应用程序。找到“微信”并点击进入。</p><br />
					<p>7. 如果微信没有出现在列表中，请点击“添加应用程序”并将微信添加到列表中。</p><br />
					<p>8.
						在微信的蓝牙权限页面中，开启蓝牙权限开关。如果以上步骤不能解决问题，您可以尝试重启您的手机或者卸载并重新安装微信。如果问题仍然存在，请联系苹果客服获得更多帮助。需要注意的是，不同版本的iOS系统可能具有不同的设置路径和名称，但基本原理相同，需要找到微信应用程序的蓝牙权限并进行开启。
					</p><br />
					<p>&nbsp;</p><br />
					<p>Q：IOS手机无法开启定位功能</p><br />
					<p>A：请确保您的手机系统版本是最新的。因为有时候系统升级可以修复一些问题。您可以前往手机设置，点击“一般”，然后选择“软件升级”来检查是否有新的系统更新。
						如果系统已经是最新版本，那么可能是权限设置的问题，您可以尝试以下步骤： </p><br />
					<p> 1.请在手机设置中找到“隐私”选项，然后点击“位置服务”。确保位置服务是打开状态，并且您可以看到应用程序列表中的各个应用开启了位置访问权限。 </p><br />
					<p>2.如果问题还未解决，您可以尝试重新启动手机。有时候重新启动可以清除临时故障。 </p><br />
					<p>&nbsp;</p><br />
					<p>Q：如无法连接蓝牙,电源灯不闪烁。</p><br />
					<p>A：请按压试剂条后再次尝试。</p><br />
				</view>
			</uni-popup>
		</view>

		<!-- 自评表 -->
		<view class="assessment" v-if="$store.state.wenjuan_show">

			<view class="single">
				<view class="text">您的姓名</view>
				<view class="choose">
					<uni-easyinput v-model="Info.Name" />
				</view>
			</view>
			<view class="single">
				<view class="text">您的性别</view>
				<view class="choose">
					<uni-data-checkbox selectedColor="#1677FF" wrap mode="list" v-model="Info.Xingb"
						:localdata="sex"></uni-data-checkbox>
				</view>
			</view>
			<view class="single">
				<view class="text">您的年龄 <text>(从16到99)</text></view>
				<view class="choose">
					<uni-easyinput v-model="Info.Nianl" />
				</view>
			</view>
			<view class="single">
				<view class="text">您的婚姻状况</view>
				<view class="choose">
					<uni-data-checkbox selectedColor="#1677FF" wrap mode="list" v-model="Info.Hunyzk"
						:localdata="marital"></uni-data-checkbox>
				</view>
			</view>
			<view class="single">
				<view class="text">您的职业</view>
				<view class="choose">
					<uni-data-checkbox selectedColor="#1677FF" wrap mode="list" v-model="Info.Zhiy"
						:localdata="occupation"></uni-data-checkbox>
				</view>
			</view>
			<view class="single">
				<view class="text">您的性取向</view>
				<view class="choose">
					<uni-data-checkbox selectedColor="#1677FF" wrap mode="list" v-model="Info.Xingqx"
						:localdata="sexual"></uni-data-checkbox>
				</view>
			</view>
			<view class="single">
				<view class="text">您发生性行为的对象 <text>(多选)</text></view>
				<view class="choose">
					<uni-data-checkbox selectedColor="#1677FF" wrap mode="list" v-model="Info.Xingxwdx" :multiple="true"
						:localdata="target"></uni-data-checkbox>
				</view>
			</view>
			<view class="single">
				<view class="text">您是否通过网络或App软件约炮</view>
				<view class="choose">
					<uni-data-checkbox selectedColor="#1677FF" wrap mode="list" v-model="Info.Yuepfs"
						:localdata="whetherYp"></uni-data-checkbox>
				</view>
			</view>
			<view class="single">
				<view class="text">您约炮使用过的软件 <text>(多选)</text></view>
				<view class="choose">
					<uni-data-checkbox selectedColor="#1677FF" wrap mode="list" v-model="Info.Yueprj" :multiple="true"
						:localdata="software"></uni-data-checkbox>
				</view>
			</view>
			<view class="single">
				<view class="text">您是否发生过无套性行为 (未全程使用安全套)</view>
				<view class="choose">
					<uni-data-checkbox selectedColor="#1677FF" wrap mode="list" v-model="Info.Wutxxw"
						:localdata="whetherWtxxw"></uni-data-checkbox>
				</view>
			</view>
			<view class="single">
				<view class="text">最后一次发生无套性行为时间</view>
				<view class="choose">
					<uni-data-checkbox selectedColor="#1677FF" wrap mode="list" v-model="Info.Wutxxwsj"
						:localdata="lastTime"></uni-data-checkbox>
				</view>
			</view>
			<view class="single">
				<view class="text">无套性行为类型</view>
				<view class="choose">
					<uni-data-checkbox selectedColor="#1677FF" wrap mode="list" v-model="Info.Wutxxwlx"
						:localdata="type"></uni-data-checkbox>
				</view>
			</view>
			<view class="single">
				<view class="text">无套性行为方式 <text>(多选)</text></view>
				<view class="choose">
					<uni-data-checkbox selectedColor="#1677FF" wrap mode="list" v-model="Info.Wutxxwfs" :multiple="true"
						:localdata="way"></uni-data-checkbox>
				</view>
			</view>

			<button @click="onSubmit" v-if="!isSubmit">提交</button>
			<button disabled="true" v-if="isSubmit">提交</button>
			<button style="margin-top: 20rpx;" @click="closeASS">关闭</button>
			<view class="blank"></view>
		</view>
	</view>
</template>

<script>
	import countDown from '@/components/countDown/countDown.vue'
	import {
		CreateQuestionnaire,
		GetQuestionnaire
	} from '@/utils/api.js';
	export default {
		name: 'TestCheck',
		components: {
			countDown
		},
		props: {
			info: {
				type: Object,
				default: () => {}
			},
			deviceNumber: {
				type: String,
				default: ''
			},
			time: {
				type: Number,
				default: 0
			}
		},
		watch: {
			time(val) {
				if (this.info && this.info.step === 6) {
					if (val === -1) {
						this.times = 0
					} else if (val > 0) {
						// 让倒计时组件动起来的测试代码
						this.times = val
						this.startCounting()
						let that = this
						// if(that.times){
						// 	that.isTan = true
						// }
						if (!that.isTan) {
							that.isTan = true
							if (this.times < 600 && this.times > 420) {
								GetQuestionnaire(that.$store.state.vx_u_info.phone).then((res) => {
									if (res.data) {
										that.isSubmit = true
										that.Info = res.data
										that.Info.Xingxwdx = that.Info.Xingxwdx.split(',')
										that.Info.Yueprj = that.Info.Yueprj.split(',')
										that.Info.Wutxxwfs = that.Info.Wutxxwfs.split(',')
									} else {
										// uni.showModal({
										// 	title: '提示',
										// 	content: '是否需要自评?',
										// 	success: function(res) {
										// 		if (res.confirm) {
										// 			that.isShow = true
										// 			that.$store.commit('$uStore', {
										// 				name: 'wenjuan_show',
										// 				value: true
										// 			})
										// 			console.log('用户点击确定', that.$store.state.wenjuan_show);
										// 		} else if (res.cancel) {
										// 			that.fixedShow = true
										// 			console.log('用户点击取消');
										// 		}
										// 	}
										// });
									}
								})
							}
						} else {
							// let data = {PhoneNumber: that.$store.state.vx_u_info.Phone}
							this.fixedShow = true
							// GetQuestionnaire(that.$store.state.vx_u_info.Phone).then((res) => {
							// 	if (res.Data) {
							// 		that.isSubmit = true
							// 		that.Info = res.Data
							// 		that.Info.Xingxwdx = that.Info.Xingxwdx.split(',')
							// 		that.Info.Yueprj = that.Info.Yueprj.split(',')
							// 		that.Info.Wutxxwfs = that.Info.Wutxxwfs.split(',')
							// 	} else {

							// 	}
							// })
						}
					}
				}
			}
		},
		data() {
			return {
				isTan: false,
				times: 0,
				currentTime: 100,
				isShow: false,
				fixedShow: false,
				isSubmit: false,
				Info: {
					Name: '',
					Phonenumber: '',
					Xingb: '',
					Nianl: '',
					Hunyzk: '',
					Zhiy: '',
					Xingqx: '',
					Xingxwdx: '',
					Yuepfs: '',
					Yueprj: '',
					Wutxxw: '',
					Wutxxwsj: '',
					Wutxxwlx: '',
					Wutxxwfs: '',
					Registrationtime: null,
					DeviceNo: ''
				},
				sex: [{
					text: '男',
					value: '男'
				}, {
					text: '女',
					value: '女'
				}],
				marital: [{
					text: '未婚',
					value: '未婚'
				}, {
					text: '已婚',
					value: '已婚'
				}, {
					text: '离异或丧偶',
					value: '离异或丧偶'
				}],
				occupation: [{
					text: '无业',
					value: '无业'
				}, {
					text: '学生',
					value: '学生'
				}, {
					text: '军人',
					value: '军人'
				}, {
					text: '教师',
					value: '教师'
				}, {
					text: '公务人员',
					value: '公务人员'
				}, {
					text: '公司职员',
					value: '公司职员'
				}, {
					text: '农民',
					value: '农民'
				}, {
					text: '服务人员',
					value: '服务人员'
				}, {
					text: '其他',
					value: '其他'
				}],
				sexual: [{
					text: '异性恋',
					value: '异性恋'
				}, {
					text: '同性恋',
					value: '同性恋'
				}, {
					text: '双性恋',
					value: '双性恋'
				}, {
					text: '未确定',
					value: '未确定'
				}],
				target: [{
					text: '配偶',
					value: '配偶'
				}, {
					text: '固定性伴',
					value: '固定性伴'
				}, {
					text: '非固定性伴',
					value: '非固定性伴'
				}],
				whetherYp: [{
					text: '是',
					value: '是'
				}, {
					text: '否',
					value: '否'
				}],
				software: [{
					text: '微信',
					value: '微信'
				}, {
					text: 'qq',
					value: 'qq'
				}, {
					text: '网站论坛或贴吧',
					value: '网站论坛或贴吧'
				}, {
					text: 'BLUED',
					value: 'BLUED'
				}, {
					text: '陌陌、探探',
					value: '陌陌、探探'
				}, {
					text: 'ALOHA',
					value: 'ALOHA'
				}, {
					text: '其他',
					value: '其他'
				}],
				whetherWtxxw: [{
					text: '是',
					value: '是'
				}, {
					text: '否',
					value: '否'
				}],
				lastTime: [{
					text: '一个月以内',
					value: '一个月以内'
				}, {
					text: '一个月以前',
					value: '一个月以前'
				}],
				type: [{
					text: '男男同性性行为',
					value: '男男同性性行为'
				}, {
					text: '男女异性性行为',
					value: '男女异性性行为'
				}, {
					text: '以上两种都有',
					value: '以上两种都有'
				}],
				way: [{
					text: '阴道交',
					value: '阴道交'
				}, {
					text: '口交',
					value: '口交'
				}, {
					text: '肛交',
					value: '肛交'
				}, {
					text: 'SM',
					value: 'SM'
				}, {
					text: '群p',
					value: '群p'
				}, {
					text: '其他',
					value: '其他'
				}],
			}
		},
		onShow() {},
		onLoad(op) {},
		methods: {
			closeASS() {
				this.isShow = false
				this.$store.commit('$uStore', {
					name: 'wenjuan_show',
					value: false
				})
			},
			onSubmit() {
				this.CreateQuestionnaire()
			},
			goAss() {
				this.isShow = true
				this.GetQuestionnaire()
				this.$store.commit('$uStore', {
					name: 'wenjuan_show',
					value: true
				})
				// console.log('打开了1111111111111111111111111111111111111111111111111111111111111111111111111111111',this.$store.state.wenjuan_show);
			},
			CreateQuestionnaire() {
				let currentTime = this.getCurrentDateTime()
				this.Info.Registrationtime = currentTime
				this.Info.Phonenumber = this.$store.state.vx_u_info.phone
				this.Info.Xingxwdx = this.Info.Xingxwdx.join(',')
				this.Info.Yueprj = this.Info.Yueprj.join(',')
				this.Info.Wutxxwfs = this.Info.Wutxxwfs.join(',')
				this.Info.DeviceNo = this.deviceNumber
				CreateQuestionnaire(this.Info).then((res) => {
					if (res.code == 200) {
						this.Info = {
							Name: '',
							Phonenumber: '',
							Xingb: '',
							Nianl: '',
							Hunyzk: '',
							Zhiy: '',
							Xingqx: '',
							Xingxwdx: '',
							Yuepfs: '',
							Yueprj: '',
							Wutxxw: '',
							Wutxxwsj: '',
							Wutxxwlx: '',
							Wutxxwfs: '',
							Registrationtime: null,
							DeviceNo: ''
						}
						uni.showToast({
							title: '提交成功',
							duration: 2000
						});
						this.isShow = false
						this.$store.commit('$uStore', {
							name: 'wenjuan_show',
							value: false
						})
					}
				})
			},
			getCurrentDateTime() {
				const currentDate = new Date();
				const year = currentDate.getFullYear();
				const month = String(currentDate.getMonth() + 1).padStart(2, '0');
				const day = String(currentDate.getDate()).padStart(2, '0');
				const hours = String(currentDate.getHours()).padStart(2, '0');
				const minutes = String(currentDate.getMinutes()).padStart(2, '0');
				const seconds = String(currentDate.getSeconds()).padStart(2, '0');

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			GetQuestionnaire() {
				GetQuestionnaire(this.$store.state.vx_u_info.phone).then((res) => {
					if (res.data) {
						this.isSubmit = true
						this.Info = res.Data
						this.Info.Xingxwdx = this.Info.Xingxwdx.split(',')
						this.Info.Yueprj = this.Info.Yueprj.split(',')
						this.Info.Wutxxwfs = this.Info.Wutxxwfs.split(',')
					} else {

					}
				})
			},
			help() {
				this.$refs.agreement.open('center')
			},
			handleScrollBottom() {
				setTimeout(() => {
					uni.pageScrollTo({
						scrollTop: 99999,
						duration: 0
					});
				}, 100)
			},
			onBack() {
				this.$emit('back')
			},
			onNext() {
				this.$emit('next')
			},
			close() {
				this.$emit('Close')
			},
			async startCounting() { //开始事件
				console.log('剩余时间', this.times)
				this.getReset()
				this.$refs.down.start()
			},
			pause() { //暂停
				this.$refs.down.pause()
			},
			pauseNum(e) { //暂停时返回剩余时间
				console.log('剩余时间：', e);
			},
			goOn() { //继续
				this.$refs.down.goOn()
			},
			endTime() { //结束
				console.log('结束');
			},
			getReset() { //重置
				if (this.$refs.down) {
					this.$refs.down.reset()
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100%;
		position: relative;

		.assessment {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
			overflow-y: scroll;
			height: 100%;
			background-color: #fff;
			padding: 30rpx;
			padding-bottom: 150rpx;
			font-size: 28rpx;

			.closebtn {
				z-index: 9999;
				position: fixed;
				top: 0;
				right: 10rpx;
			}

			.single {
				margin-top: 20rpx;
			}

			.blank {
				width: 100%;
				height: 100rpx;
			}
		}
	}

	.test-check {
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.close_btn {
		padding: 0;
		text-align: center;
		position: absolute;
		right: 23rpx;
		bottom: 330rpx;
		width: 80rpx;
		height: 30rpx;
		font-size: 16rpx;
		background: #1e64e1;
		color: #FFFFFF;
	}

	.top-content {
		height: 700rpx;
		position: relative;

		.step-image {
			margin-top: 96rpx;
		}
	}

	.fixed-box {
		position: absolute;
		right: 0;
		top: 300rpx;
		width: 100rpx;
		height: 60rpx;
		background-color: #FFFFFF;
		color: black;
		text-align: center;
		border-radius: 5rpx;
		line-height: 60rpx;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.content {
		position: relative;
		padding-top: 12rpx;
		box-sizing: border-box;
		height: 100%;
		overflow-y: scroll;
		background-color: #F5F7FB;

		&.multi {
			height: unset;

			.container {
				padding-top: 55rpx;
				margin-bottom: 150rpx;

				.step-item {
					margin-bottom: 90rpx;

					&:last-of-type {
						padding-bottom: 50rpx;
					}
				}

				.step-name {
					text-align: left;
					width: 627rpx;
					margin: 0 auto;
				}
			}
		}

		&.short {
			margin-top: 76rpx;

			.step-name {
				padding-left: 73rpx;
				// padding-top: 70rpx;
				font-size: 31rpx;
				text-align: left;
			}
		}

		.container {
			width: 100%;
			height: 100%;
			background-color: #F5F7FB;
			border-top-left-radius: 38rpx;
			border-top-right-radius: 38rpx;
			position: relative;

			.down-arrow {
				width: 28rpx;
				height: 48rpx;
				position: fixed;
				top: 500rpx;
				right: 50rpx;
			}
		}

		.image-wrap {
			height: 650rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			padding: 0 100rpx;
		}

		.content-bg {
			position: absolute;
			width: 100%;
			z-index: 0;
			top: 0;
			left: 0;
		}

		.arrow-left {
			width: 24rpx;
			height: 28rpx;
			position: absolute;
			left: 38rpx;
			top: 400rpx;
		}

		.arrow-right {
			width: 24rpx;
			height: 28rpx;
			position: absolute;
			right: 38rpx;
			top: 400rpx;
		}

		.step-name {
			text-align: center;
			font-size: 46rpx;
			font-weight: bold;
			color: #333333;
			line-height: 54rpx;
			margin-bottom: 26rpx;
		}

		.step-desc {
			width: 627rpx;
			margin: 0 auto;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 35rpx;
			color: rgba(51, 51, 51, 0.6);
			padding: 10rpx 0 30rpx 0;
		}

		.success-name {
			margin-top: 30rpx;
			font-size: 54rpx;
			font-weight: bold;
			color: #323232;
			line-height: 64rpx;
			text-align: center;
		}

		.success-info {
			margin-top: 38rpx;
			font-size: 36rpx;
			font-weight: normal;
			color: #323232;
			line-height: 60rpx;
			text-align: center;
		}
	}

	.step-image {
		width: 100%;
		display: block;
		margin: auto;

		&.step-5 {
			width: 438rpx;
			height: 438rpx;
		}

		&.step-6 {
			width: 404rpx;
			height: 441rpx;
		}
	}

	.image-desc {
		margin-top: 48rpx;
		font-weight: 400;
		text-align: center;
		font-size: 46rpx;
		color: #FFFFFF;
		line-height: 46rpx;
	}

	.countdown {
		margin: 28px auto;
		width: 350rpx;
		height: 350rpx;
		display: block;
	}

	.reading-data {
		margin-top: 65rpx;
		font-size: 46rpx;
		font-weight: bold;
		color: #ffffff;
		line-height: 64rpx;
		text-align: center;

		&.small {
			font-weight: 36rpx;
		}
	}

	.device-number {
		margin-top: 19rpx;
		line-height: 23rpx;
		text-align: center;
		font-size: 23rpx;
		font-weight: 400;
		color: #FFFFFF;
	}


	.result-wrap {
		padding-top: 92rpx;

		.result-image {
			margin: 0 auto;
			display: block;
			width: 354rpx;
			height: 418rpx;
		}

		.result-text {
			margin-top: 32rpx;
			font-size: 46rpx;
			color: #333333;
			font-weight: bold;
			text-align: center;
		}

		.device-number {
			font-size: 28rpx;
			color: #333333;
			margin-top: 55rpx;
		}

		.tips {
			padding: 40rpx 40rpx 0 40rpx;
			font-size: 28rpx;
			line-height: 30rpx;
			// margin-top: 20rpx;
			color: #787878;
			text-align: center;
		}
	}

	.btn_box {
		// margin-top: 20rpx;
		width: 100%;
		height: 85rpx;
		background-color: #F5F7FB;

		.next-btn2 {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 77rpx;
			// bottom: 0;
			margin: 0 auto;
			width: 465rpx;
			height: 85rpx;
			line-height: 85rpx;
			background: #1e64e1;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			border-radius: 15rpx;

			&.white {
				background: #FFFFFF;
				color: #1e64e1;
				bottom: 248rpx;
			}
		}
	}

	.next-btn {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 77rpx;
		// bottom: 0;
		margin: 0 auto;
		width: 465rpx;
		height: 85rpx;
		line-height: 85rpx;
		background: #1e64e1;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		border-radius: 15rpx;

		&.white {
			background: #FFFFFF;
			color: #1e64e1;
			bottom: 248rpx;
		}
	}

	.scan-btn-wrap {
		height: 200rpx;

		.scan-btn {
			margin: 0 auto;
			width: 465rpx;
			height: 85rpx;
			line-height: 85rpx;
			background: #1e64e1;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			border-radius: 15rpx;
		}
	}

	.agreement-height {
		padding: 20rpx;
		width: 615rpx;
		height: 70vh;
		margin: 0 auto;
		border-radius: 26rpx;
		background-color: #ffffff;
		position: relative;
		overflow: auto;

		.agree-bg {
			width: 615rpx;
			position: absolute;
			z-index: 0;
		}

		.login-content {
			width: 515rpx;
			position: absolute;
			padding: 60rpx 50rpx 0;
			height: calc(100% - 100rpx);
			overflow-y: scroll;
		}

		.agreement-btn-wrap {
			background-color: #ffffff;
			padding-top: 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.ok-btn {
				width: 250rpx;
				height: 85rpx;
				line-height: 85rpx;
				background: #1e64e1;
				border-radius: 15rpx;
				text-align: center;
				font-size: 31rpx;
				font-weight: 400;
				color: #FFFFFF;
			}

			.refuse-btn {
				width: 250rpx;
				height: 85rpx;
				line-height: 85rpx;
				font-size: 31rpx;
				font-weight: 400;
				color: #333333;
				background: #EBEBED;
				text-align: center;
				border-radius: 15rpx;
			}
		}
	}

	@media only screen and (max-device-width: 375px) {
		.content {
			.image-wrap {
				height: 480rpx;
			}
		}

		.top-content {
			.step-image {
				margin-top: 36rpx;
			}
		}

		.result-wrap {
			padding-top: 62rpx;
		}
	}
</style>